<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" /> -->
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/backstage/css/font.css">
    <link rel="stylesheet" href="/backstage/css/xadmin.css">
    <!-- <link rel="stylesheet" href="http://unpkg.com/iview/dist/styles/iview.css"> -->
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">电影管理</a>
        <a>
          <cite>分类列表</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body" id='mainBox'>
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
            <input class="layui-input" placeholder="开始日" name="start" id="start">
            <input class="layui-input" placeholder="截止日" name="end" id="end">
            <input type="text" name="seach_text" placeholder="输入内容搜索" id='seach_text' class="layui-input">
            <button class="layui-btn" lay-submit="" lay-filter="sreach" type="button" @click="seachData"><i
                    class="layui-icon">&#xe615;</i></button>
        </form>
    </div>
    <div>
        <button class="layui-btn layui-btn-danger"
                onclick="delAll('{:url("delete")}')"><i class="layui-icon"></i>批量删除
        </button>
        <button class="layui-btn" onclick="x_admin_show('新增电影分类','{:url("create")}')">
        <i class="layui-icon"></i>新增
        </button>
        <span class="x-right" style="line-height:40px">共有数据：{{pageData.count}} 条</span>
    </div>
    <table class="layui-table">
        <thead>
        <tr>
            <th>
                <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">
                    &#xe605;</i></div>
            </th>
            <!--<th>ID</th>-->
            <th>分类名称</th>
            <th>排序</th>
            <th>创建时间</th>
            <th>操作</th>
        </thead>
        <tbody>
        <tr v-for="(item,index) in dataList">
            <td>
                <div class="layui-unselect layui-form-checkbox" onclick="checkThis(this)" lay-skin="primary"
                     :data-id='item.id'><i class="layui-icon">&#xe605;</i></div>
            </td>
            <!--<td>{{item.id}}</td>-->
            <td>{{item.type_name}}</td>
            <td>{{item.rank}}</td>
            <td>{{item.create_time}}</td>

            <td class="td-manage">

                <a title="编辑分类" @click="x_admin_show(item.id)" href="javascript:;">
                    <i class="layui-icon">&#xe642;</i>
                </a>
                <a title="删除分类" @click="del(index,item.id)" href="javascript:;">
                    <i class="layui-icon">&#xe640;</i>
                </a>
            </td>
        </tr>
        <tr v-if="dataList.length<1">
            <td colspan='10' style="text-align:center">暂无数据</td>
        </tr>
        </tbody>
    </table>
    <div style="text-align:center">
        <!-- <div>
          <a class="prev" href="">&lt;&lt;</a>
          <a class="num" href="">1</a>
          <span class="current">2</span>
          <a class="num" href="">3</a>
          <a class="num" href="">489</a>
          <a class="next" href="">&gt;&gt;</a>
        </div> -->
        <div v-if="dataList.length>0" id="page"></div>
    </div>
</div>

<!-- import iView -->

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/vue.js"></script>
<!-- <script src="http://unpkg.com/iview/dist/iview.min.js"></script>     -->
<script type="text/javascript" src="/backstage/js/xadmin.js"></script>
<script type="text/javascript" src="/backstage/lib/layui/layui.js"></script>

<script>

    var app = new Vue({
        el: '#mainBox',
        data: {
            dataList: [],
            pageData: {
                page: 1,
                count: 10,
                pageSize: 10,
                start: '',
                end: '',
                seach_text: ''
            }
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            },

            //获取列表
            getListData: function () {

                var that = this;
                $.get('{:config("template.root_path")}/movietype', that.pageData, function (res) {
                    if (res.code == 200) {
                        that.dataList = res.list;
                        that.pageData.page = res.pageData.page;
                        that.pageData.count = res.pageData.count;
                        that.pageData.pageSize = res.pageData.pageSize;

                        if (that.pageData.page == 1) {
                            page(that.pageData);
                        }
                    } else {
                        layer.msg(res.msg, {icon: 5, time: 1000});
                    }
                }, 'json');
            },

            //分页
            page: function () {
                var that = this;
                setTimeout(function () {
                    page(that.pageData);
                }, 100)
            },

            x_admin_show: function (id) {
//                x_admin_show('编辑', '{:config(\'template.root_path\')}//' + id + '/edit');
                x_admin_show('编辑', '{:config("template.root_path")}/movietype/edit/?id=' + id);
            },

            //删除
            del: function (index, id) {
                var that = this;
                layer.confirm('确认要删除吗？', {title: ''}, function (index) {
                    $.post('{:config(\'template.root_path\')}/movietype/delete', {ids: id}, function (res) {
                        if (res.code == 200) {
                            layer.msg('已删除!', {icon: 1, time: 1000});
                            that.getListData();
                        } else {
                            layer.msg(res.msg, {icon: 5, time: 1000});
                        }
                    }, 'json')
                });
            },

            //搜索
            seachData: function () {
                this.pageData.end = $('#end').val();
                this.pageData.start = $('#start').val();
                this.pageData.page = 1;
                this.pageData.seach_text = $('#seach_text').val();
                this.getListData();

            },

        },
        created: function () {
            this.getListData();
        }
    })

    layDate();

</script>

</body>

</html>